<!-- 任务列表 -->
<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><b>用例管理</b></el-breadcrumb-item>
            <el-breadcrumb-item>任务列表</el-breadcrumb-item>
            <el-card class="box-card" shadow="never">
                <el-select v-model="valuetype" placeholder="请选择" @change="changeType">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-table  stripe :cell-style="rowStyle" style="width:100%" :data="taskList" class="el-table">
                    <el-table-column align="center" prop="tester_id" label="工号" width="180"></el-table-column>
                    <el-table-column align="center" prop="tester_name" label="任务执行人" width="180"></el-table-column>
                    <el-table-column align="center" prop="case_id" label="用例编号" width="180"></el-table-column>
                    <el-table-column align="center" prop="case_description" label="用例描述" width="180"></el-table-column>
                    <el-table-column align="center" prop="case_createTime" label="用例创建时间" width="180"></el-table-column>
                    <el-table-column align="center" prop="case_state" label="用例状态" width="180">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.case_state === '待完成' ? 'primary' : 'success'" disable-transitions>
                                {{scope.row.case_state}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="操作">
                        <template v-slot="scope">
                            <el-tooltip effect="dark" content="确认完成任务" placement="top" :enterable="false">
                                <el-button type="primary" icon="el-icon-edit" size="mini"
                                    @click="submitTask(scope.row.case_id)">提交任务</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页组件 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum" :page-sizes="[1, 3, 5, 6]" :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total=this.total>
                </el-pagination>
            </el-card>
            <el-dialog v-dialog-drag title="新增用例" :visible.sync="dialogVisible" width="30%"
                @close="dialogClose('addFormRef')">
                <el-form label-width="100px" :model="addForm" ref="addFormRef" :rules="rules">
                    <el-form-item label="用例编号" prop="tester_name">
                        <el-input v-model="addForm.tester_name"></el-input>
                    </el-form-item>
                    <el-form-item label="账户" prop="tester_username">
                        <el-input v-model="addForm.tester_username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="tester_password">
                        <el-input v-model="addForm.tester_password"></el-input>
                    </el-form-item>
                    <el-form-item label="工作经验" prop="tester_experience">
                        <el-input v-model="addForm.tester_experience"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="tester_phone">
                        <el-input v-model="addForm.tester_phone"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addUser('addFormRef')">添加</el-button>
                </div>
            </el-dialog>
            <el-dialog v-dialog-drag title="修改用户" :visible.sync="updatedialogVisible" width="30%">
                <el-form label-width="100px" :model="updateForm" ref="updateFormRef" :rules="rules">
                    <el-form-item label="工号">
                        <el-input v-model="updateForm.tester_id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="tester_name">
                        <el-input v-model="updateForm.tester_name"></el-input>
                    </el-form-item>
                    <el-form-item label="账户" prop="tester_username">
                        <el-input v-model="updateForm.tester_username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="tester_password">
                        <el-input v-model="updateForm.tester_password"></el-input>
                    </el-form-item>
                    <el-form-item label="工作经验" prop="tester_experience">
                        <el-input v-model="updateForm.tester_experience"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="tester_phone">
                        <el-input v-model="updateForm.tester_phone"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updatedialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateUser">保存</el-button>
                </div>
            </el-dialog>
        </el-breadcrumb>
    </div>
</template>
<script>
export default {
    data() {
        return {
            valuetype: 'all',
            options: [
                {
                    value: "all",
                    label: "待完成/已完成"
                },
                {
                    value: '待完成',
                    label: '待完成'
                },
                {
                    value: '已完成',
                    label: '已完成'
                }],
            arr: [],
            disabled: false,
            //用例列表
            caseList: [],
            //任务列表
            taskList: [],
            //发布任务对话框的信息
            pushlishForm: [],
            //关键字参数
            tester_id: "",
            queryInfo: {
                //当前页数
                pagenum: "1",
                //每页多少条
                pagesize: "4",
                case_state: ""
            },
            //测试员数量
            total: "",
            //对应id的用户信息
            caseinfo: [],
            value: true,
            currentPage1: 5,
            //添加用户对话框是否显示
            dialogVisible: false,
            //修改用户信息对话框是否显示
            publishdialogVisible: false,
            //添加用户
            addForm: {
                tester_id: "",
                tester_name: "",
                tester_experience: "",
                tester_phone: "",
                tester_username: "",
                tester_password: ""
            },
            //修改用户
            updateForm: {},
            rules: {
                tester_id:
                    [
                        { required: true, trigger: "blur" }
                    ],
                tester_name: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在2到8位之间", trigger: "blur" },
                ],
                tester_experience: [
                    { required: true, message: "请输入工作经验", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在2位以上", trigger: "blur" },
                ],
                tester_phone: [
                    { required: true, message: "请输入电话", trigger: "blur" },
                    { min: 7, max: 11, message: "长度在7到11位之间", trigger: "blur" },
                ],
                tester_username: [
                    { required: true, message: "请输入账户名", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在2到8位之间", trigger: "blur" },
                ],
                tester_password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在2到8位之间", trigger: "blur" },
                ],
            },
        };
    },
    watch: {
        valuetype() {
            this.getTaskList()
        }
    },
    created() {
        // this.getOptions()
        this.getTaskList()
        this.handleSizeChange(pagesize)
        this.handleCurrentChange(pagenum)
    },
    methods: {
        rowStyle() {
            return "text-align:center"
        },
        //获取用例列表&&分页列表
        async getTaskList() {
            this.queryInfo.tester_id = window.localStorage.getItem("userid")
            console.log(this.queryInfo)
            this.queryInfo.case_state = this.valuetype
            const { data: res } = await this.$http.get("/api/taskList/page", {
                params: this.queryInfo
            })
            console.log(res)
            if (res.status != 200) {
                console.log("no data")
            }
            else {
                this.taskList = res.data
                this.total = res.total
            }
        },
        //监听pagesize的事件
        handleSizeChange(pagesize) {
            console.log(`每页 ${pagesize} 条`);
            this.queryInfo.pagesize = pagesize;
            this.getTaskList();
        },
        //监听页码值改变事件
        handleCurrentChange(pagenum) {
            console.log(`当前页: ${pagenum}`);
            this.queryInfo.pagenum = pagenum;
            this.getTaskList();
        },
        //添加新用户
        addUser(addFormRef) {
            this.$refs[addFormRef].validate(async (valid) => {
                if (!valid) return;
                const { data: res } = await this.$http.post("/api/user/insert", this.addForm);
                if (res.meta.status !== 200) {
                    return this.$message.error("用户添加失败");
                }
                this.dialogVisible = false;
                this.getTaskList();
                return this.$message.success("用户添加成功");
            });
        },
        //展示修改用户对话框并展示信息
        async showUpdateDialog(id) {
            console.log(id)
            this.updatedialogVisible = true
            const { data: res } = await this.$http.get("/api/user", {
                params: {
                    "tester_id": id
                }
            });
            if (res.meta.status != 200) {
                return this.$message.error("获取列表失败");
            }
            else {
                this.updateForm = res.data
                console.log(this.updateForm)
            }
        },
        //修改用户信息
        async updateUser() {
            const { data: res } = await this.$http.post("/api/user/update", this.updateForm)
            if (res.meta.status != 200) {
                this.$message.error("修改失败")
            }
            else {
                this.$message.success("修改成功")
                this.getTaskList()
            }
            this.updatedialogVisible = false
        },
        //删除用户信息
        async deleteUser(id) {
            const { data: res } = await this.$http.get("/api/user/delete", {
                params: {
                    "tester_id": id
                }
            })
            console.log(res)
            if (res.meta.status != 200) {
                return this.$message.error("删除用户失败");
            }
            else {
                this.$message.success("删除用户成功")
                this.getTaskList();
            }
        },
        //获取下拉菜单数据
        async getOptions(id) {
            var _options
            const { data: res } = await this.$http("/api/user/findAll")
            if (res.meta.status != 200) {
                this.$message.error("查找失败")
            }
            else {
                _options = res.data
            }
            const { data: res1 } = await this.$http.get("/api/testerinfo_caseinfo", {
                params: {
                    "case_id": id
                }
            })
            if (res1.meta.status != 200) {
                console.log("no data")
            }
            else {
                this.taskList = res1.data
                console.log(this.taskList)
            }
            for (let i = 0; i < _options.length; i++) {
                for (let j = 0; j < this.taskList.length; j++) {
                    if (_options[i].tester_id === this.taskList[j].tester_id) {
                        _options[i].disabled = true
                    }
                }
            }
            this.options = _options
        },
        //展示发布任务对话框
        async showPublishTask(id) {
            this.getOptions(id)
            const { data: res } = await this.$http("/api/case", {
                params: {
                    "case_id": id
                }
            })
            if (res.meta.status != 200) {
                this.$message.error("查找失败")
            }
            else {
                this.caseinfo = res.data
            }
            this.publishdialogVisible = true
        },
        //发布任务
        async publishTask() {
            const obj = {
                "case_id": this.caseinfo.case_id,
                "idlist": this.options.value
            }
            const { data: res } = await this.$http.post('/api/case/publish', obj)
            console.log(res)
            if (res.meta.status != 200) {
                this.$message.error("发布失败")
            }
            else {
                this.$message.success("发布成功")
            }
        },
        //提交任务
        async submitTask(id) {
            const confirmRusult = await this.$confirm(
                "此操作将确认任务已经完成, 是否继续?",
                "永久删除该用户",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).catch((err) => err);
            console.log(confirmRusult);
            // 用户点击了删除,则返回字符串 confirm
            // 用户取消了删除,则返回字符串 cancel
            if (confirmRusult !== "confirm") {
                return this.$message.info("已经取消了提交");
            }
            const { data: res } = this.$http.get("/api/taskList/submit",
                {
                    params: {
                        "case_id": id
                    }
                }
            )
            this.getTaskList()
            if (res.meta.status !== 200) return
            this.publishdialogVisible = false
            this.$message.success("任务提交成功并完成")
        }
    },
    changeType(value) {
        this.getTaskList()
    }
}
</script>
<style scoped>
.box-card {
    margin-top: 150px;
    width: 100%;
}

.el-table {
    margin-top: 20px;
}
</style>